<template>
  <div class="txsq">
       <Header title="办公室调休申请">
      <template v-slot:left>
        <span @click="$router.go(-1)">&lt;</span>
      </template>
    </Header>
    <div class="xxqk">
        <div class="top">
            <div class="grname">申请人姓名</div>
            <div class="zgname">直接主管</div>
        </div>
        <div class="grxx">
            <div class="xx">
          <div class="title">申请信息
            <input type="text" @click="showtime=true" v-model="time">
            <mt-datetime-picker ref="time" v-show="showtime" @confirm="getTime"></mt-datetime-picker></div>

        <div class="rq">休假日期</div>
        <div class="lx">休假类型</div>
        <div class="qssj">休假起始时间</div>
        <div class="zzsj">休假截止时间</div>
        <div class="gjsj">共计时数</div>  
        </div>
        <div class="sy">
            <div class="title">休假事由</div>
            <div class="text"></div>
        </div>
        <div class="fj">
            +上传附件
        </div>
        </div>
      
    </div>
  </div>
</template>

<script>
import {DatetimePicke} from 'mint-ui'

import Header from '../Common/Header'
import {d} from 'mint-ui'
export default {
  data() {
    return {
      showtime:false,
      time:''
    }
  },
components: {
   Header
 }
 ,methods:{
   getTime(date){
     this.time =  date.getFullYear()+'-' + date.getMonth() +'-'+date.getDate()+' '+date.getHours()+':'+date.getMinutes()+':'+date.getSeconds();
            this.showtime = false;
   }
 }
}
</script>

<style lang="scss">
.header{
  background: green;
  color: #fff;

}
.txsq{
    width: 100%;
    height: 667px;
    position: relative;
    .xxqk{
      width: 100%;
      height: 627px;
      background: #eee;
      .top{
        padding-left: 20px;
        width: 100%;
        height: 100px;
        background: rgb(12, 101, 12);
        color: #fff;
        line-height: 40px;
        border-radius: 0 0 20px 20px;
      }
      .grxx{
        padding: 20px;
        background: #fff;
        width: 80%;
        line-height: 40px;
        height: 547px;
        position: absolute;
        left: 10%;
        top: 120px;
      }
    }
}
</style>